<template>
    <div>
        {{readonlyInfo1}}
        {{readonlyInfo2}}
        {{readonlyInfo3}}

        <button @click="updateState1">+readonlyInfo1</button>
        <button @click="updateState2">+readonlyInfo2</button>
        <button @click="updateState3">+readonlyInfo3</button>
    </div>
</template>

<script>
import { reactive, readonly, ref } from 'vue'

export default {
    //使用场景: 我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个响应式对象希望在另外一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢
    //只读对象:readonly会返回原生对象的只读代理(也就是和ref类型,但是proxy的set方法被劫持,不能对其修改)
    setup() {
        //1.普通对象 
        const info1 = {name:"why"}
        const readonlyInfo1 = readonly(info1);

        //2.响应式对象reactive
        const info2 = reactive({
            name:"why"
        })
        const readonlyInfo2 = readonly(info2);
        
        //2.响应式对象ref
        const info3 = ref("why")
        const readonlyInfo3 = readonly(info3);

        const updateState1 = ()=>{
            // readonlyInfo1.name = "coderWhy"  //会报警告
            info1.name = "coderWhy" //可以修改,但是info不是响应式的所以没有效果,必须触发其他的ref或reactive对象才能进行数据更新
        }
        const updateState2 = ()=>{
            // readonlyInfo2.name = "coderWhy"  //会报警告
            info2.name = "coderWhy" //可以修改
        }
        const updateState3 = ()=>{
            // readonlyInfo3.value = "coderWhy"    //会报警告
            info3.value = "coderWhy"
        }
        // const readonlyInfo3 = readonly(info2);
        return {
            readonlyInfo1,
            readonlyInfo2,
            readonlyInfo3,
            updateState1,
            updateState2,
            updateState3
        }
    }
}
</script>

<style lang="scss" scoped>
</style>